.timeline * {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
  font-family: sans-serif;
  
}
.timeline .container {
  /*background-color: #f1f1f1;*/
  padding: 10px;
}

.timeline img{
	margin-bottom:20px;
  width: 100%;
}

.timeline ul {
  position: relative;
  overflow: hidden;
  list-style: none;
  max-width: 800px;
  margin: 30px auto;
  padding: 0;
}
.timeline ul:after {
  content: "";
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  margin-left: -4px;
  height: 100%;
  background-color: #fff;
  -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.timeline li {
  z-index: 2;
  position: relative;
  width: 380px;
  padding: 20px;
  float: left;
  margin-bottom: 30px;
  background-color: #fff;
  line-height: 1;
  margin-left: 0;
  
}
.timeline li.leftTL {
  float: left;
  clear: left;
}
.timeline li.rightTL {
  float: right;
  clear: right;
}
.timeline li.highlightTL {
  float: none;
  clear: both;
  width: auto;
  
}
.timeline li.dateTL {
  float: none;
  clear: both;
  width: auto;
  background-color: #7eade0;
  height: auto;
  width: 100%;
  color: #fff;
  font-size: 24px;
  text-align: center;
  margin-bottom:60px;
}

  /* arrow */

.timeline li:before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 14px;
  right: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  background-color: #fff;

  -webkit-transform: rotate(45deg); 
     -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
       -o-transform: rotate(45deg); 
          transform: rotate(45deg); 
        	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

}
.timeline li.leftTL:before {
  left: auto;
}
.timeline li.rightTL + li.leftTL:before,
.timeline li.leftTL + li.rightTL:before {
  top: 36px;
}
.timeline li.highlightTL:before {
  left: 50%;
  margin-left: -6px;
  right: auto;
  top: -6px;
}
.timeline li.dateTL:before {
  left: 50%;
  margin-left: -6px;
  right: auto;
  top: 58px;
  background-color: #7eade0;
}

  /* dot */
.timeline li:after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 14px;
  right: -27px;
  left: -27px;
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
  border-radius: 100%;
  background-color: #fff;

   
}
.timeline li:hover:after {
  content: "";
  background-color: #7eade0;
  top: 12px;
  right: -29px;
  left: -29px;
  width: 12px;
  height: 12px;
   transition: 0.5s ;
}
.timeline li.leftTL:after {
  left: auto;
}
.timeline li.rightTL + li.leftTL:after,
.timeline li.leftTL + li.rightTL:after {
  top: 36px;
}
.timeline li.rightTL + li.leftTL:hover:after,
.timeline li.leftTL + li.rightTL:hover:after,
.timeline li.dateTL + li.dateTL:hover:after {
  top: 34px;
}
.timeline li.rightTL:after {
  right: auto;
}
.timeline li.highlightTL:after {
  left: 50%;
  margin-left: -7px;
  right: auto;
  top: -24px;
}
.timeline li.highlightTL:hover:after {
  margin-left: -9px;
  top: -26px;
}
.timeline li.dateTL:after {
  left: 50%;
  margin-left: -7px;
  right: auto;
  top: 75px;
}
.timeline li.dateTL:hover:after {
  margin-left: -9px;
  top: 75px;
}

::selection {
	background: #7eade0; /* Safari */
	color:#fff;
	}
::-moz-selection {
	background: #7eade0; /* Firefox */
	color:#fff;
}
/*
@media (max-width: 980px){
  body {
    background: #ccc;
  }
.timeline li.left {
  float: none;
  clear: left;
}
.timeline li.right {
  float: none;
  clear: right;
}
}
*/
/*li:hover:after{
	content: attr(data-tooltip);
	float: none;
  	clear: both;
  	width: auto;
  	background-color: #7eade0;
  	height: auto;
  	width: 100%;
	color: #fff;
	font-size: 24px;
	text-align: center;
	margin-bottom:60px;
}*/
